<template>
  <ui-page class="home-container">
    <header-layout>
      <div class="welcome">
        <div><component :is="list[5].name" title="欢迎使用考勤后台管理系统! Welcome Your Use!"></component></div>
      </div>
      <div class="home-content">
        <div class="home-content-item">
          <div><component :is="list[0].name" title="用户信息"></component></div>
          <div class="item-info common-info">
            <div class="info-row">您好，
              {{ userInfo.type === 1 ? '系统管理员：' + userInfo.nickname : '平台管理员：' + userInfo.nickname }}
            </div>
            <div class="info-row">当前用户数量：{{ userNums }}个</div>
          </div>
        </div>
        <div class="home-content-item">
          <div><component :is="list[0].name" title="快速功能"></component></div>
          <div class="item-info">
            <div v-for="group in groups" :key="group.id" class="group">
              <h3>{{ group.name }}</h3>
              <div class="links">
                <el-tooltip v-for="menu in group.children" :key="menu.id" :content="menu.desc">
                  <router-link :to="menu.url">
                    <div class="links-item">{{ menu.name }}</div>
                  </router-link>
                </el-tooltip>
              </div>
            </div>
          </div>
        </div>
        <div class="home-content-item">
          <div><component :is="list[0].name" title="系统时间"></component></div>
          <div class="item-info common-info" style="font-size: 30px;">
            <div class="info-row">当前时间</div>
            <div class="info-row">{{ currentTime }}</div>
          </div>
        </div>
        <div class="home-content-item">
          <div><component :is="list[0].name" title="系统简介"></component></div>
          <div class="item-info">
            <div class="info-row"
                 style="text-indent: 2em;display: flex;justify-content: center;font-size: 20px;color: #a7daff">
              {{ systemIntroduction }}</div>
          </div>
        </div>
      </div>
    </header-layout>
  </ui-page>
</template>
<script>
import {mapState} from 'vuex';
import HeaderLayout from '@/components/layout/header';
import data from './titleData'
import to from "await-to-js";
import moment from "moment";

export default {
  name: 'Home',
  data () {
    return {
      list: data,
      userNums: null,
      currentTime: '',
      systemIntroduction: '本考勤管理系统是一款基于现代化信息技术，集多种功能于一体的综合性管理平台。该系统致力于为用户提供高效、' +
          '便捷、安全的数据处理与业务管理体验，旨在帮助企业实现数字化转型，提升运营效率，降低运营成本。'
    }
  },
  components: {HeaderLayout},
  computed: {
    ...mapState(['menus', 'userInfo']),
    groups() {
      let menus = this.filterMenu(this.menus);
      menus = menus.filter(menu => menu.url !== '/Home');
      console.log(menus)
      if (this.userInfo.type === 0) {
        menus = menus.filter(menu => [1, 3].includes(menu.sign));
      } else if (this.userInfo.type === 1) {
        menus = menus.filter(menu => ![3, 10].includes(menu.sign));
      }
      return menus;
    },
  },
  created() {
    this.getUsersNum()
    this.updateTime();
    this.intervalId = setInterval(this.updateTime, 1000); // 每秒更新一次时间
  },
  beforeDestroy() {
    clearInterval(this.intervalId); // 组件销毁前清除定时器
  },
  methods: {
    filterMenu(menus) {
      if (!Array.isArray(menus)) {
        return [];
      }
      return menus.reduce((prev, {children, ...menu}) => {
        if ([1, 2].includes(menu.type)) {
          if (Array.isArray(children) && children.length > 0) {
            menu.children = this.filterMenu(children);
          }
          prev.push(menu);
        }
        return prev;
      }, []);
    },
    async getUsersNum() {
      const tenantId = this.userInfo.tenantId
      const [, result] = await to(this.$axios.get(`/Sys/SysUser/selectCount?tenantId=${tenantId}`));
      // const [, result] = await to(this.$axios.get('/Sys/SysUser/selectCount'));
      this.userNums = result.data || null
    },
    updateTime() {
      const momentObj = moment(new Date());
      this.currentTime = momentObj.format('YYYY-MM-DD ' +
          momentObj.localeData().weekdaysShort()[momentObj.day()]) + ' ' + momentObj.format('HH:mm:ss');

    }
  },
};
</script>
<style lang="less" scoped>
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-thumb {
  background: rgba(10, 28, 60, 0.8);
  border-radius: 10px;
  box-shadow: inset 2px 2px 2px rgba(255, 255, 255, 0.25),
    inset -2px -2px 2px rgba(0, 0, 0, 0.25);
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-corner {
  background: transparent;
}
.home-content {
  display: flex;
  padding: 20px 100px;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 50px 215px;

  .home-content-item {
    color: #fff;

    .item-info {
      padding: 10px 40px;
      width: 550px;
      min-height: 200px;
      max-height: 300px;
      overflow: auto;

      .info-row {
        margin-bottom: 10px;
      }

      .group {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 10px;

        h3 {
          font-size: 20px;
          font-weight: bold;
          color: #6686ff;
        }

        .links {
          margin-top: 10px;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          gap: 16px;
        }
      }
    }

    .common-info {
      display: flex;
      flex-direction: column;
      font-size: 40px;
      align-items: flex-start;
      justify-content: center;
      color: #a7daff;
    }
  }
}
</style>
<style lang="less">
.home-container {
  width: 100%;
  height: 100%;
  overflow: auto;

  .layout-container {
    background-color: #2E363D !important;
  }

  .welcome {
    display: flex;
    padding: 15px 0;
  }
}
</style>
